<template>
  <div class="wb-item-header-footer" v-if="getItem || getVariableItem" @click.stop>
    <div class="header" :style="headerStyles">
      <div v-if="getVariableItem.mid" class="num-con" :style="votePosition">{{num}}</div>
      <van-button v-if="getVariableItem.mid" :style="btnStyles" @click.stop="onPost($event)"></van-button>
    </div>
    <transition name="fade" v-on:after-leave="onAfterLeave" v-on:after-enter="onAfterLeave">
      <div class="fold" :style="foldConStyles" v-show="isFoldShow">
        <p v-if="isFoldClickElement" :style="foldClickPositionStyles" @click.stop="onMidJump($event, getVariableItem.mid)">{{getBlogText}}</p>
        <div v-if="isFoldUserElement" class="user-con" :style="foldUserPositionStyles" @click.stop>
          <img v-if="headFrameUrl" class="position-absolute" :style="headFrameStyle" :src="headFrameUrl">
          <img crossOrigin="anonymous" class="head" @click.stop :src="headUrl">
          <p class="margin-left-10 font-bold overflow-hidden" :style="nameStyle" v-if="dataKeys.name"> {{getVariableItem.name}} </p>
        </div>
        <ul v-if="isFoldMidElement" :style="foldMidPositionStyles">
          <li v-for="(mid, index) in mids" :key="index" :style="foldMidItemStyles" @click.stop="onMidJump($event, mid)">pp</li>
        </ul>
      </div>
    </transition>
    <div class="footer">
      <van-button :style="foldBtnStyles" @click.stop="onDisplayOrHiddenItem"></van-button>
    </div>
    <img v-if="commonAttr.isSort && voteItemData && rankUrl.length > 0" v-lazy="rankUrl" :style="crownPosition" class="crown-img" alt />
    <img v-if="commonAttr.isSort && voteItemData && medalUrl.length > 0 && index < 3" v-lazy="medalUrl" :style="medalPosition" class="medal-img" alt />
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { vote } from "@/components/js/vote"
import { EventBus } from '@/store/index'
import { reactive } from 'vue'
import { getPxOVwByValue, getPxOrVw } from '@/store/utils'

export default {
  mixins: [utils, commonUtils, vote],
  setup () {
    return reactive({
      foldConAttr: [688,609,-20,20],//width,top,marginTop,marginLeft
      foldBtnAttr: ['https://static.hd.xxx.com/upload/biz/26/671313.png', 'https://static.hd.xxx.com/upload/biz/26/186822.png',122,36,-26],// 展开 收起
      foldBtnStyles: {
        backgroundColor: 'transparent',
        backgroundImage: 'url(https://static.hd.xxx.com/upload/biz/26/671313.png)',
      },
      isFoldShow: true,
    })
  },
  components: {
  },
  created(){
    this.foldBtnStyles = {
      width: getPxOVwByValue(122),
      height: getPxOVwByValue(36),
      marginTop: getPxOVwByValue(-26),
    }

    if(this.commonAttr.foldAttr.con.length > 0){
      this.foldConAttr = this.commonAttr.foldAttr.con.split(',');
    }
    if(this.commonAttr.foldAttr.btn.length > 0){
      this.foldBtnAttr = this.commonAttr.foldAttr.btn.split(',');
      this.setFoldBtnStyles();
    }
  },
  computed: {
    nameStyle(){
      let fontSize_ = this.nameFontSize;
      const position = this.commonAttr.foldAttr.userPosition;
      const attr = position.split(',');
      return{
        color: this.commonAttr.repostsNameColor,
        fontSize: fontSize_,
        lineHeight: getPxOVwByValue(attr[3]), 
      }
    },
    headUrl(){
      return this.getVariableItem.avatar_large ? this.getVariableItem.avatar_large : this.getVariableItem.pic_url;
    },
    mids(){
      return this.getVariableItem.mids ? this.getVariableItem.mids.split(',') : [];
    },
    isFoldUserElement(){
      const position = this.commonAttr.foldAttr.userPosition;
      return position && position.length && this.getVariableItem.mid > 0 ? true : false;
    },
    foldUserPositionStyles(){
      const position = this.commonAttr.foldAttr.userPosition;
      const attr = position.split(',');
      const style_ = { 
        position: 'absolute', 
        left: getPxOVwByValue(attr[0]), 
        top: getPxOVwByValue(attr[1]), 
        width: getPxOVwByValue(attr[2]), 
        height: getPxOVwByValue(attr[3]), 
      };
      return style_
    },
    headFrameUrl(){
      const position = this.commonAttr.foldAttr.userPosition;
      const attr = position.split(',');
      return attr[4] ? attr[4] : '';
    },
    headFrameStyle(){
      const position = this.commonAttr.foldAttr.userPosition;
      const attr = position.split(',');
      let wid = attr[5] ? attr[5] : 80;
      let style_ = {
        width: getPxOVwByValue(wid),
        height: getPxOVwByValue(wid),
        marginLeft: getPxOVwByValue(-(wid-attr[3])/2),
        marginTop: getPxOVwByValue(-(wid-attr[3])/2),
      };

      return style_
    },
    //折叠中的定位内容
    isFoldClickElement(){
      const position = this.commonAttr.foldAttr.clickPosition;
      return position && position.length && this.getVariableItem.mid > 0 ? true : false;
    },
    foldClickPositionStyles(){
      let style_ = this.getTextStyle;
      let positionStyle_ = this.positionStyle(this.commonAttr.foldAttr.clickPosition);
      delete positionStyle_.height
      _.merge(style_, positionStyle_);
      return style_;
    },
    isFoldMidElement(){
      const position = this.commonAttr.foldAttr.midPosition;
      return position && position.length > 0 && this.getVariableItem.mid > 0 ? true : false;
    },
    foldMidPositionStyles(){
      const position = this.commonAttr.foldAttr.midPosition;
      const attr = position.split(',');
      const style_ = { 
        position: 'absolute', 
        left: getPxOVwByValue(attr[0]), 
        top: getPxOVwByValue(attr[1]), 
      };
      return style_
    },
    foldMidItemStyles(){
      const position = this.commonAttr.foldAttr.midPosition;
      const attr = position.split(',');
      const style_ = { 
        width: getPxOVwByValue(attr[2]), 
        height: getPxOVwByValue(attr[3]), 
      };
      return style_
    },
    headerStyles(){
      let unit = getPxOrVw()
      return {
        backgroundImage: 'url(' + this.getVariableItem.url + ')',
        width: this.commonAttr.itemPicWidth + unit,
        height: this.commonAttr.itemPicHeight + unit,
      }
    },
    foldConStyles(){
      return {
        backgroundImage: 'url(' + this.getVariableItem.foldUrl + ')',
        width: getPxOVwByValue(this.foldConAttr[0]),
        height: getPxOVwByValue(this.foldConAttr[1]),
        marginTop: getPxOVwByValue(this.foldConAttr[2]),
        marginLeft: getPxOVwByValue(this.foldConAttr[3]),
      }
    },
    votePosition(){
      let styles_ = this.positionStyle(this.commonAttr.votePosition);
      let arr = this.commonAttr.votePosition.split(',');
      if(arr[4]){
        styles_.fontSize = getPxOVwByValue(arr[4]);
      }
      if(arr[5]){
        styles_.color = arr[5];
      }
      return styles_;
    }
  },
  mounted(){
    if(this.index >= 3){
      this.onDisplayOrHiddenItem();
    }
  },
  methods: {
    onPost(e){
      EventBus.$emit("itemClick", {id: this.item.id, index: this.index, e, isReset: false})
    },
    onDisplayOrHiddenItem(){
      if(this.isFoldShow){
        this.isFoldShow = false;
        this.foldBtnStyles.backgroundImage = 'url(' + this.foldBtnAttr[0] + ')';
      }else{
        this.isFoldShow = true;
        this.foldBtnStyles.backgroundImage = 'url(' + this.foldBtnAttr[1] + ')';
      }
    },
    onAfterLeave(){
      if(!this.isH5Edit){
        this.$emit("adjustCommomListHeight")
      }
    },
    setFoldBtnStyles(){
      this.foldBtnStyles.backgroundImage = 'url(' + this.foldBtnAttr[1] + ')';
      this.foldBtnStyles.width = getPxOVwByValue(this.foldBtnAttr[2]);
      this.foldBtnStyles.height = getPxOVwByValue(this.foldBtnAttr[3]);
      this.foldBtnStyles.marginTop = getPxOVwByValue(this.foldBtnAttr[4]);
    }
  }
};
</script>
<style lang="scss">
.wb-item-header-footer{
  position: relative;

  .header{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-size: contain;

    .product{
      display: flex;
      flex-direction: column;
      width: 20%;
    }

    .num-con{
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
      justify-content: center;
      justify-items: center;
    }
  }
  .fold{
    position: relative;
    display: flex;
    flex-direction: row;
    background-size: contain;

    li{
      background-color: blueviolet;
      opacity: 0.01;
    }
    .user-con{
      display: flex;
      flex-direction: row;
      align-content: center;

      .head{
        height: inherit;
        object-fit: contain;
        border-radius: 50%;
      }
      
      p{
        display: inline-block;
      }
    }
  }
  .footer{
    width: 100%;
  }
  .crown-img, .medal-img{
    object-fit: contain;
  }
}
</style>

